<template>
    <van-checkbox class="my-checkbox" v-model="modelValue" shape="square" @change="setStatus" :disabled="disabled">
        <slot/>
    </van-checkbox>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import {Checkbox as vanCheckbox} from 'vant'
export default {
    props:{
        modelValue:Boolean,
        disabled:{
            type:Boolean,
            default:false
        }
    },
    components:{
       vanCheckbox 
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })
        const setStatus = checked=>{
            context.emit('update:modelValue', checked)
        }

        return{
            ...toRefs(state),
            setStatus
        }
    }
}
</script>

<style lang="scss">
    .my-checkbox .van-checkbox__icon .van-icon{
        height: 30px;
        width: 30px;
        border-radius:4px;
        font-size: 28px !important;
        margin: 5px 0 0 0;
    }
    .my-checkbox .van-checkbox__icon--checked .van-icon{
        background: #fff;
        color: #0E6161;
        line-height: normal;
    }
    .my-checkbox .van-checkbox__label{
        color: #fff;
    }
    .my-checkbox .van-checkbox__icon--disabled .van-icon{
        opacity: 0.3;
    }
</style>